@charset "utf-8";

@import "header";

.slide{
    margin-top: 50px;
    .item{
        width: 100%;
        img{
            width: 100%;
        }
    }
}

.hot{
   position: relative;
   .hot_icon{
       color: #ffffff;
       font-size: 20px;
       padding-top: 15px;
       text-align: center;
       position: absolute;
       top: 0;
       left: 15px;
       width: 40px;
       background: #e14738;
       height: 100px;
       .glyphicon{
           position: absolute;
           bottom:0 ;
           left: 0;
           font-size: 40px;
           &::before{
               position: absolute;
               bottom: -12px;
           }
       }
   }
}


.left_img,.right_img{
    padding: 0;
}
.right_img{
    img{
        position: absolute;
        display: block;
        right: 0;
        z-index: -1;
    }
    
}
.person_img{
    margin-top: 41px;
}

.right_content{
    padding-top: 32px;
}

.game_title{
    p{
        margin-top: 5px;
        line-height: 30px;
        font-size: 12px;
        margin-bottom: 28px;
    }
    h4{
        font-weight: 600;
        font-size: 30px;
    }
    
}

.more_game{
    margin-bottom: 30px;
}

.case{
    padding-top: 100px;
}

.case_title{
    h3{
        font-size: 36px;
        margin-bottom: 38px;
    }
}

.case_item{
    margin-bottom: 43px;
    text-align: center;
    img{
        border-radius:5px ;
        &:hover{
            opacity: .8;
        }
    }
    p{
        font-size: 14px;
        margin-top: 13px;
    }
}

@media (min-width:1200px){
    .container{
        width: 1000px;
    }
}


@media (max-width:768px){
    .left_img,.right_img{
        display: none;
    }
    .hot{
        padding-top: 100px;
    }
    .case_item{
        margin-bottom: 15px;
        p{
            margin-top: 8px;
        }
    }
    .case_title{
        h3{
            text-align: center;
        }
    }
    .case{
        padding-top: 30px;
    }
}

@media (min-width:992px){
    .game_item_img{
        overflow: hidden;
        position: relative;
        .txt_four{
            z-index: 9;
            border-radius: 5px;
            transition: all .4s linear;
            position: absolute;
            top: 0;
            left: -100%;
            width: 303px;
            height: 133px;
            padding: 8px;
            background: rgba(0,0,0,.5);
            p{
                text-align: left;
                font-size: 12px;
                color: #FFFFFF; 
            }
        }
        &:hover .txt_four{
            left: 0;
        }
    }
}

@media (max-width:992px){
    .txt_four{
        display: none;
    }
}


@import "footer";
